import React from 'react'
import PropTypes from 'prop-types'
import {Select, Table} from 'antd'
import classnames from 'classnames'
import styles from './List.less'

const {Option} = Select

const DataList = ({
                    loading,
                    location,
                    data,
                    handleChange,
                  }) => {

  const tableProps = {
    rowKey: 'id',
    dataSource: data.records,
    loading: loading.effects['permission/datas'],
    pagination: false,
    location,
  }

  let getOptions = (
    data.keys
      ? data.keys.map(item => (<Option value={item.key}>{item.text}</Option>))
      : "")

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 100,
      render: (text, record, index) => {
        return (index + 1)
      },
    },
    {
      title: '模块',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '数据权限',
      dataIndex: 'key',
      key: 'key',
      render: (key, record) =>
        (<Select onChange={(val) => {
          handleChange(val, record.id)
        }} value={key || 'SELF'} style={{width: '200px'}}>
          {getOptions}
        </Select>),
    },
  ]

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      columns={columns}
      simple
    />
  )
}

DataList.propTypes = {
  roles: PropTypes.array,
  handleRoleMenuClick: PropTypes.func,
}

export default DataList
